<!DOCTYPE html>
<html lang="en">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  <meta content="no-cache" http-equiv="Cache-Control"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <meta content="yes" name="apple-mobile-web-app-capable"/>
  <meta content="telephone=no" name="format-detection"/>
  <title>聊天</title>
  <link rel="stylesheet" href="../css/weui.min.css">
  <link rel="stylesheet" href="../css/message.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="weui-mask loading-bg"></div>

<div id="container" class="main">
  <div class="wrapper">
    <ul class="content" ref="content">
      <li class="message-remind">
        请在此充分交流后，再互加微信等其他方式深入了解，违法违规用户将被禁言或禁用。
      </li>
      <li v-for="(item, index) in recordList">
        <div class="send-time" :style="{ width: formatDate(item.CreatedAt).length == 5 ? '4rem' : '7rem'}" v-if="index == 0 || item.CreatedAt.substr(0, 16) !== recordList[index - 1].CreatedAt.substr(0, 16)">{{formatDate(item.CreatedAt)}}</div>
        <img src="../img/default-header.png" :data-src="item.HeadImgUrl" :class="{imgright: item.openid == userInfo.openid, imgleft: item.openid != userInfo.openid}" @click="jumpToUserDetail(item.openid)">
        <span :class="{ spanright: item.openid == userInfo.openid, spanleft: item.openid != userInfo.openid }">{{item.ChatContent}}</span>
      </li>
    </ul>
  </div>
  <!--<img src="../img/icon-evolution.png" class="evolution-btn">-->

  <div class="weui-mask" v-if="(TaReplyNum == 50 || TaReplyNum == 200 || TaReplyNum == 400) && EvaluatePoint < TaReplyNum || showEvolution" @click="showEvolution = false"></div>
  <div class="score-block" :style="{ bottom: ((TaReplyNum == 50 || TaReplyNum == 200 || TaReplyNum == 400) && EvaluatePoint < TaReplyNum || showEvolution) ? 0 : '-9.5rem' }">
    <div class="star-list">
      <div class="star" v-for="item in 5" @click="addStar(item)" :class="{ active: item <= activeStarIndex }"></div>
      <button class="submit-btn" @click="evaluateUser">匿名评价</button>
    </div>
    <div class="remind">请对照交谈情况及对方资料，对ta的诚信程度给予评价，评价的客观程度也将影响你的诚信分，完成后即可继续聊天！</div>
  </div>

  <div class="header-input-block" :class="{ 'show-func': showFunc }">
    <div class="more-func" @click="showEvolution = true"></div>
    <input type="text" placeholder="请用键盘右下角的开始/前往/换行发送文字" @focus="scrollToBottom" class="weui-flex__item" v-model="chatContent" @keydown.enter="createChat" maxlength="200">
    <!--<div class="message-length">{{chatContent.length}}/200</div>-->
    <!--<span id="btn" v-if="editting" :class="{ 'black-color': (TaReplyNum == 50 || TaReplyNum == 200 || TaReplyNum == 400) && EvaluatePoint < TaReplyNum && !showEvolution }" @click="createChat">发送</span>-->

    <div class="function">
      <div class="func-item">
        <div @click="showEvolution = true;showFunc = false"><img src="../img/icon-evolution.png"></div>
        <span>评价</span>
      </div>
      <div class="func-item">
        <!--<div></div>-->
        <!--<span>评价</span>-->
      </div>
      <div class="func-item">
        <!--<div></div>-->
        <!--<span>评价</span>-->
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="../js/tools/weui.js"></script>
<script type="text/javascript" src="../js/tools/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/tools/bscroll.min.js"></script>
<script type="text/javascript" src="../js/tools/vue.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/serviceInterface/serviceInterface.js"></script>
<script type="text/javascript" src="../js/pages/message.js"></script>
</body>
</html>